<template>
	<div class="header-right">
		<a class="header-btn-left" href="./desktop" @contextmenu="showRightMenu">
			<i class="fa fa-desktop" aria-hidden="true"></i>
			桌面
		</a>
		<a class="header-btn-left active" href="#">
			<i class="fa fa-bars" aria-hidden="true"></i>
			文件管理
		</a>
		<a class="header-btn-left" href="#">
			<i class="fa fa-windows" aria-hidden="true"></i>
		</a>
		<a class="header-btn-right user-menu" href="#"  @click="getUserMenu">
			<i class="fa fa-user" aria-hidden="true"></i>
			{{username}}
			<i class="fa fa-caret-down" aria-hidden="true"></i>
		</a>
		<a class="header-btn-right lang" href="#" @click="getLangMenu">
			<i class="fa fa-flag" aria-hidden="true"></i>
			<i class="fa fa-caret-down" aria-hidden="true"></i>
		</a>
	</div>
</template>

<script>
import dialog from 'art-dialog'
export default {
  name:'HomeHeaderRight',
  data () {
  	return {
  		username: 'name'
  	}
  },
  methods: {
  	getUserMenu () {

  	},
  	getLangMenu () {

  	},showRightMenu (param) {
			param.preventDefault()  

  	}
  }
}

</script>

<style lang="stylus">
	@import '~styles/varibles.styl'
	.header-right {
		overflow: hidden
		height: 100%
		line-height: $headerTopPC
		text-align: center
		background: #fff
		font-size: $headerTopPC * 0.4
		
		i {
			padding-right: .2em
		}
		.header-btn-left {
			overflow: hidden
			padding: 0 1.2em
			float: left
			color: #666
			border-right: 1px solid #eee
			transition: all .2s
			
			&:hover , &.active {
				background: #eee
			}
		}
		
		.header-btn-right {
			overflow: hidden
			padding: 0 .6em
			float: right
			border-left: 1px solid #eee
			color: #666

		}
	}
</style>
